<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />


    <link href="../assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/jquery-multi-select/css/multi-select.css" rel="stylesheet" type="text/css" />



    <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../assets/global/css/plugins.min.css" rel="stylesheet"  type="text/css" />
    <link rel="stylesheet" href="../assets/global/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../assets/custom/css/changeother.css"/>
</head>
<body>
<div class="portlet light process_two">
    <div class="portlet-body">
        <div class="mt-element-step">
        <div class="row step-line">
            <div class="col-md-3 col-xs-3 mt-step-col first">
                <div class="mt-step-number bg-white font-grey">1</div>
                <div class="mt-step-title uppercase font-grey-cascade">选择输入源</div>
            </div>
            <div class="col-md-3 col-xs-3 mt-step-col active">
                <div class="mt-step-number bg-white font-grey">2</div>
                <div class="mt-step-title uppercase font-grey-cascade">输入配置</div>
            </div>
            <div class="col-md-3 col-xs-3 mt-step-col">
                <div class="mt-step-number bg-white font-grey">3</div>
                <div class="mt-step-title uppercase font-grey-cascade">转换配置</div>
            </div>
            <div class="col-md-3 col-xs-3 mt-step-col last">
                <div class="mt-step-number bg-white font-grey">4</div>
                <div class="mt-step-title uppercase font-grey-cascade">输出配置</div>
            </div>
        </div>
        </div>
        <div class="form-body">
            <div class="form-group">
                <span class="col-md-1 col-xs-1 control-label label_on_max">流程名称</span>
                <input type="text" class="input-sm col-md-11 col-xs-11"/>
            </div>
            <div class="form-group">
                <h3>抽取配置</h3>
            </div>
            <div class="form-group">
                <span>元数据对象名：数据对象名(表名)</span>
            </div>
            <div class="form-group">
                <span class="col-md-1 col-xs-1 control-label label_on_max">过滤SQL</span>
                <textarea class="col-md-11 col-xs-11" placeholder="不需要输入where" style="height: 100px; padding: 10px 15px; resize: vertical;max-height:200px;min-height: 50px;"></textarea>
            </div>
            <div class="form-group">
                <span class="col-md-1 col-xs-1 control-label label_on_max">并发数：</span>
                <div class="col-md-4 col-xs-4">
                    <input id="touchspin_3" type="text" class="col-md-4" name="demo_vertical">
                </div>

            </div>
            <div class="form-group">
                <span class="col-md-1 col-xs-1 control-label label_on_max">筛选字段：</span>
                <div class="mt-checkbox-box col-md-1 col-xs-1">
                    <label class="mt-checkbox mt-checkbox-outline">
                        <input type="checkbox" value="1" name="test" class="select_field"/>
                        <span></span>
                    </label>
                </div>
                <div style="display: none;" class="col-md-6 col-xs-6 data_exchange">
                        <select multiple="multiple" class="multi-select" id="my_multi_select1" name="my_multi_select1[]">
                            <option>Dallas Cowboys</option>
                            <option>New York Giants</option>
                            <option selected>Philadelphia Eagles</option>
                            <option selected>Washington Redskins</option>
                            <option>Chicago Bears</option>
                            <option>Detroit Lions</option>
                            <option>Green Bay Packers</option>
                            <option>Minnesota Vikings</option>
                            <option selected>Atlanta Falcons</option>
                            <option>Carolina Panthers</option>
                            <option>New Orleans Saints</option>
                            <option>Tampa Bay Buccaneers</option>
                            <option>Arizona Cardinals</option>
                            <option>St. Louis Rams</option>
                            <option>San Francisco 49ers</option>
                            <option>Seattle Seahawks</option>
                        </select>
                    </div>
            </div>
            <div class="form-group">
            <span class="col-md-1 col-xs-1 control-label label_on_max">跳过转换配置</span>
            <div class="mt-checkbox-box col-md-1 col-xs-1">
                <label class="mt-checkbox mt-checkbox-outline">
                    <input type="checkbox" value="1" name="test" />
                    <span></span>
                </label>
            </div>
        </div>
        </div>
        <div class="process_foot margin-top-20 fr clearfix">
            <button class="btn blue-hoki">上一步</button>
            <button class="btn blue-hoki margin-left-20">下一步</button>
            <button class="btn default margin-left-20">取消</button>
        </div>
    </div>
</div>

</body>
<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js" type="text/javascript"></script>
<script src="../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="../assets/global/plugins/fuelux/js/spinner.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>

<script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>

<script src="../assets/pages/scripts/components-bootstrap-touchspin.min.js" type="text/javascript"></script>
<script src="../assets/pages/scripts/components-multi-select.min.js" type="text/javascript"></script>

<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="../assets/pages/scripts/components-select2.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="../assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
<script src="../assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
<script src="../assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
<script src="../assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>

<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/layui/layui.all.js"></script>
<script>
    $('.select_field').click(function(){
        if ($(this).is(':checked')) {
            $('.data_exchange').css("display","block")
        }else {
            $('.data_exchange').css("display","none")
        }
    })

</script>
</html>